<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<view class="body">
			<image class="logo" src="../../static/static/loginlogo.png" mode="widthFix"></image>
			<view class="logoName">
				中金国际
			</view>
			<!-- 账号 -->
			<view class="title">用户名</view>
			<view class="input">
				<input type="text" v-model="username" placeholder="请输入用户名"/>
				<image src="../../static/static/user_icon.png" mode="widthFix"></image>
			</view>
			<view class="title">昵称</view>
			<view class="input">
				<input type="text" v-model="nickname" placeholder="请输入昵称"/>
				<image src="../../static/static/user_icon.png" mode="widthFix"></image>
			</view>
			<!-- 密码 -->
			<view class="title" style="margin-top: 30upx;">密码</view>
			<view class="input">
				<input type="password" v-model="password" placeholder="请输入密码"/>
				<image src="../../static/static/password_icon.png" mode="widthFix"></image>
			</view>
			<!-- 确认密码 -->
			<view class="title" style="margin-top: 30upx;">确认密码</view>
			<view class="input">
				<input type="password" v-model="password_confirmation" placeholder="请再次输入密码"/>
				<image src="../../static/static/password_icon.png" mode="widthFix"></image>
			</view>
			<!-- 手机号 -->
			<view class="title" style="margin-top: 30upx;">手机号</view>
			<view class="input">
				<input type="number" v-model="mobile" placeholder="请输入手机号" />
				<image src="../../static/static/mobile.png" mode="widthFix"></image>
			</view>
			<!-- 验证码 -->
			<view class="title" style="margin-top: 30upx;">验证码</view>
			<view class="input">
				<input type="text" v-model="captcha" placeholder="请您输入验证码"/>
				<image @click="getCaptcha()" class="captchaImg" :src="capImg" mode="widthFix"></image>
			</view>
			<!-- 注册 -->
			<view class="logoin" @click="zhuce">注册</view>
			<!-- 登录 -->
			<view class="registered">
				<text>已有账号,</text><text @click="login">请登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				username:"", //用户名
				password:"", //密码
				nickname:"",
				password_confirmation:"", //确认密码
				mobile:"", //手机号
				captcha:"", //验证码
				capImg:"", //验证码图片
				checked:false, //记住账号-密码
			};
		},
		onLoad(e) {
			this.getCaptcha()
		},
		methods:{

			// 跳转到登录页
			login(){
				uni.navigateTo({
					url:"/pages/login/index"
				})
			},
			//验证码
			getCaptcha(){
				this.capImg = "http://www.zb1237.com/captcha?t="+new Date();
			},
			blur(){
				var reg = /^1[3456789]\d{9}$/;
				if(!reg.test(this.mobile)){
					uni.showToast({
						title: "请输入正确的手机号",
						duration: 1000,
						icon: "none"
					});
				} else{
					this.$u.api.servicepost({
						username: this.username,
						nickname: this.nickname,
						captcha: this.captcha,
						password: this.password,
						mobile: this.mobile,
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: "none"
						});
						if(res.msg == "注册成功"){
							setTimeout(()=>{
								this.login()
							},1000)
						}
					})
				}
			},
			// 注册账号 没有通 验证码错误
			zhuce(){
				if(this.username && this.password && this.password_confirmation && this.mobile){
					if(this.password == this.password_confirmation){
						this.blur()
					}else{
						uni.showToast({
							title: "两次密码不一致",
							duration: 1000,
							icon: "none"
						});
					}
				}else{
					uni.showToast({
						title: "请填写信息",
						duration: 1000,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style scoped>
	.body{
		height: calc(100vh - var(--status-bar-height));
		overflow-y: auto;
	}
	.body .logo{
		margin: 40upx auto 0;
		display: block;
		width: 200upx;
	}
	.body .logoName{
		text-align: center;
		line-height: 60upx;
		font-family: 'Helvetica Neue',Helvetica,sans-serif;
		font-size: 34upx;
		color: #cbcbd6;
		margin-bottom: 60upx;
		margin-top: 10upx;
	}
	.title{
		width: 590upx;
		color: white;
		margin: 0 auto;
		padding-left: 10upx;
	}
	.input{
		width: 590upx;
		height: 80upx;
		margin: 0 auto;
		border-radius: 0;
		color: #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #383e63;
	}
	.input image{
		width: 32upx;
		margin: 0 20upx;
	}
	.input input{
		font-size: 24upx;
		padding-left: 10upx;
	}
	.title{
		font-size: 32upx;
	}
	.input .captchaImg{
		width: 200upx;
	}
	.logoin{
		width: 590upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 60upx;
		margin: 60upx auto 40upx;
		font-size: 34upx;
		color: #fff;
		background-color: #0ea2ff;
	}
	.registered{
		margin-top: 40upx;
		text-align: center;
		font-size: 24upx;
	}
	.registered text:nth-of-type(1){
		color: #cbcbd6;
	}
	.registered text:nth-of-type(2){
		color: #007aff;
	}
</style>
